<template>
	<view>
		<TabBar :activeIndex="1"></TabBar>
		<view class="right-content">
			<view class="tit">
				<u-icon class="back" size="24" name="/static/img/arrow-left.svg" @click="goBack"></u-icon>
			</view>
			<view class="content">
				<web-view :src="links"></web-view>
			</view>
			<view class="operation">
				<u-button type="primary" size="large" text="签名"  @click="autograph"></u-button>
				<u-modal :show="showAutograph" width="900px" title="签名"
						 :show-cancel-button='true' @confirm="confirm" @cancel="cancel">
					<view class="x-modal">
						<view class="x-m-title">
							<text>请在框内进行签名</text>
							<view class="xm-t-clear" @click="clear">
								<image src="/static/clean.png" mode=""></image>
								<text>清除</text>
							</view>
						</view>
						<view class="x-m-con">
							<!-- 重点在此，画布 -->
							<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
						</view>
					</view>
				</u-modal>
			</view>
		</view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      links: "",
	  showAutograph: false, //签名弹框是否显示
	  ctx: '', //绘图图像
	  points: [], //路径点集合 
	  signature: '',
    };
  },
  methods:{
	  goBack() {
		  console.log("goBack")
	  	uni.navigateBack({
	  		delta: 1
	  	})
	  },
	  //创建并显示签名画布
	  autograph() {
	  	this.showAutograph = true;
	  	console.log("this.showAutograph",this.showAutograph)
	  	//创建绘图对象
	  	this.ctx = uni.createCanvasContext("mycanvas", this);
	  	//设置画笔样式
	  	this.ctx.lineWidth = 4;
	  	this.ctx.lineCap = "round"
	  	this.ctx.lineJoin = "round"
	  },
	  //触摸开始，获取到起点
	  touchstart(e) {
	  	let startX = e.changedTouches[0].x;
	  	let startY = e.changedTouches[0].y;
	  	let startPoint = {
	  		X: startX,
	  		Y: startY
	  	};
	  	this.points.push(startPoint);
	  	//每次触摸开始，开启新的路径
	  	this.ctx.beginPath();
	  },
	  //触摸移动，获取到路径点
	  touchmove(e) {
	  	let moveX = e.changedTouches[0].x;
	  	let moveY = e.changedTouches[0].y;
	  	let movePoint = {
	  		X: moveX,
	  		Y: moveY
	  	};
	  	this.points.push(movePoint); //存点
	  	let len = this.points.length;
	  	if (len >= 2) {
	  		this.draw(); //绘制路径
	  	}
	  },
	  // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
	  touchend() {
	  	this.points = [];
	  },
	  /* ***********************************************
	  #   绘制笔迹
	  #	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
	  #	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
	  #	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
	  ************************************************ */
	  draw() {
	  	let point1 = this.points[0]
	  	let point2 = this.points[1]
	  	this.points.shift()
	  	this.ctx.moveTo(point1.X, point1.Y)
	  	this.ctx.lineTo(point2.X, point2.Y)
	  	this.ctx.stroke()
	  	this.ctx.draw(true)
	  },
	  //清空画布
	  clear() {
	  	let that = this;
	  	uni.getSystemInfo({
	  		success: function(res) {
	  			let canvasw = res.windowWidth;
	  			let canvash = res.windowHeight;
	  			that.ctx.clearRect(0, 0, canvasw, canvash);
	  			that.ctx.draw(true);
	  		},
	  	})
	  },
	  //关闭并清空画布
	  cancel() {
	  	this.showAutograph = false;
	  	this.clear();
	  },
	  //完成绘画并保存到本地
	  confirm() {
	  	let that = this;
		uni.showModal({
			content:"是否确认提交签名？",
			success: function(res){
				if(res.confirm){
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: function(res) {
							console.log(res.tempFilePath) 
							//图片格式为base64，如果不是可上传七牛云，之后请求签名接口即可
							// that.$api.api.h5.sign({
							// 	"merSignName": res.tempFilePath,
							// 	"workId": that.workId
							// }).then(res=>{
							// 	if(res.result.code=='000000') {
									//走到这里就签名成功了
									uni.redirectTo({
										url:'/pages/meeting-detail/meeting-detail'
									})
							// 	}else{
							// 		that.$u.toast(res.result.message)
							// 	}
							// })
						}
					})
				}
			}
		})
	  }
  },
  onLoad(params) {
    let { link } = params;
    link = decodeURIComponent(link);
    this.links = `/static/hybrid/pdf.html?url=${link}`;
	this.id = params.id
	let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
	let duration_timeout = setTimeout(function() {  
		let wv = currentWebview.children()[0];  
		console.log(wv);  
		wv.setStyle({  
			//设置web-view距离顶部的距离以及自己的高度，单位为px  
			top: 100,  
			left: 170,  
			width: 1120,  
			height: 620,
		});  
		clearTimeout(duration_timeout);  
	}, 500);
  },
  onBackPress() {},
};
</script>

<style lang="scss">
	@import "@/static/css/_px2vw.scss";
	.tit{
		width: 100%;
		height: vw(50);
		text-align:center;
		background-color:rgb(64,158,255);
		line-height: vw(50);
		font-size:vw(20);
		color:#FFFFFF;
		font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
		font-weight:700;
		font-style:normal;
		.back{
			height: vw(50);
			line-height: vw(50);
			margin-left: vw(15);
			float:left;
		}
	}
	.content{
		height: 80vh;
		uni-web-view {
			margin-top: vw(50);
			margin-left: vw(120);
			height: 80vh;
		}
	}
	.operation{
		margin-left: 74vw;
		height: 5vh;
		display:flex;
		.u-popup{
			/deep/ uni-view{
				z-index: 19990 !important;
			}
			&>div{
				z-index: 19990 !important;
			}
		}
		uni-button{
			margin: vw(0) vw(10);
			height: vw(30);
			/deep/ uni-text{
				font-size:vw(13) !important;
			}
		}
		uni-view{
			/deep/ uni-text{
				font-size:vw(20) !important;
			}
			/deep/ .u-modal__button-group__wrapper{
				height: vw(40);
			}
		}
		@mixin playcenter {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.x-modal {
			width: 100%;
			
			.x-m-title {
				width: 100%;
				height: vw(45);
				padding: 0 vw(19) 0 vw(16);
				box-sizing: border-box;
				font-size: vw(20);
				color: #333333;
				border-bottom: vw(1) dashed #999;
				@include playcenter;
				justify-content: space-between;
				.xm-t-clear {
					font-size: vw(18);
					color: #341DB7;
					@include playcenter;
					image {
						width: vw(20);
						height: vw(20);
						display: block;
						margin-right: vw(4);
					}
				}
			}
			.x-m-con {
				height: vw(360);
				width: 100%;
				padding: 0 vw(16) vw(9);
				margin-top: vw(3);
				box-sizing: border-box;
				.mycanvas{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
</style>
